<template>
	<view>
		<!-- <view class="bg"></view> -->
		<image class="bg" :src="headCaseImg" mode=""></image>
		<view class="p-fff10">
			<!-- <sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex"
				padding="20rpx" :size="90" activeLineBg="#fff" textAlign="center" activeLineWidth="40%"
				activeDirection="center" activeLineHeight="4rpx" bgColor="#fff" :margin="10"
				@change="getChange"></sunui-navbar> -->
			<v-tabs v-model="current" :tabs="dynamicTagsCase" @change="changeTab"></v-tabs>
		</view>
		<view class="flex-wrap-justifyBetween caseCenter">
			<block v-if="list.length">
				<view class="help-top" v-for="(item,index) in list" :key="index">

					<view class="cardHelper" @click="handlePlay(item.id,item.realQuantity)">
						<!-- <video :src="helpDetailObject.icon" :poster="helpDetailObject.icon+'?spm=a2c4g.11186623.2.1.yjOb8V&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'"></video> -->
						<video :src="item.video"  class="img-124"
							width="320" height="240" controls
							:poster="item.video+'?spm=a2c4g.11186623.2.1.yjOb8V&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'">

						</video>
						<!-- <video  :src="item.video" :poster="palyVideo+'?x-oss-process=video/snapshot,t_1000,m_fast'"></video> -->
						<!-- <image class="img-124" :src="item.video+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></image> -->
						<view class="caseTtile font-overflow">
							{{item.heading}}

						</view>
						<view class="bofan flex ">
							<image class="bofanImg" src="../../static/bofan.png" mode=""></image>
							<text class="bofanNum">{{ totelName(item.realQuantity+item.virtualQuantity)}}</text>
						</view>
					</view>
				</view>
			</block>

			<block v-else>
				<image src="../../static/tips.png" mode="aspectFit"></image>
			</block>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],

				currentIndex: 0,
				dynamicTagsCase: [],
				current: 0,


				// 头部轮播
				headCaseImg: '',

			}
		},

		onLoad() {
			this.getHostSysConfigInfoFn()

		},

		onShow() {


		},
		computed: {
			totelName: function() {
				return function(count) {
					console.log(count)
					if (count >= 10000) {
					    return (count / 10000).toFixed(1) + '万';
					  } else {
					    return count.toString();
					  }
				};
			},
		},
		methods: {
			async initList() {
				console.log(this.dynamicTagsCase)
				const result = await this.$http.post({
					url: this.$api.caseList,
					data: {
						sortLabel: this.dynamicTagsCase[0]
					}

				});
				console.log(result)
				if (result.code = 2000) {

					if (result.data.length) {
						this.list = result.data
					} else {
						this.list = []
					}


				}
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/index/caseDetail?id=' + id
				})
			},
			async handlePlay(id, realQuantity) {
                 console.log('1112313')

				const result = await this.$http.post({
					url: this.$api.caseModify,
					data: {
						id: id,
						realQuantity: realQuantity + 1
					}

				});
			},
			getChange(index) {

				// this.currentIndex = index;
				// this.mescroll.resetUpScroll();
			},
			async getHostSysConfigInfoFn() {
				const result = await this.$http.post({
					url: this.$api.getHostSysConfigInfo,

				});
				console.log(result)
				if (result.code == 2000) {
					if (result.data.caseSortLabel.length) {
						// 头部轮播
						this.headCaseImg = result.data.caseImg
						const caseSortLabel = result.data.caseSortLabel
						let caseList = []

						if (caseSortLabel.includes(',')) {
							console.log('字符串中包含逗号');
							// 包含的进行slice(',') 分割
							caseList = caseSortLabel.split(',').map((item) => item.trim());
						} else {
							console.log('字符串中不包含逗号');
							caseList = caseSortLabel.split();
						}

						let newArray = caseList.map((item, index) => {
							// return {
							// 	id: index,
							// 	name: item

							// }
							return item
						})

						console.log("===>", newArray);



						console.log("222===>", this.dynamicTagsCase);


						this.$nextTick(() => {
							this.dynamicTagsCase = newArray;

						})

						this.initList()
						// this.$set(this, 'dynamicTagsCase', newArray);

						// console.log(this.dynamicTagsCase)


					}

				} else {
					this.$sun.toast(result.msg)
				}
			},
			async changeTab(index) {

				this.current = index;
				console.log(index)
				// this.mescroll.resetUpScroll();
				const result = await this.$http.post({
					url: this.$api.casePageList,
					data: {
						sortLabel: this.dynamicTagsCase[index]
					}

				});
				console.log(result)
				if (result.code = 2000) {
					this.list = result.data

				}


			},



		}
	}
</script>

<style lang="scss">
	.caseCenter {
		padding: 20rpx;
	}

	.p-fff10 {
		margin-bottom: 15rpx;
	}

	.img-124 {
		width: 340rpx;
		height: 456rpx;
		margin-left: auto;
	}

	.name {
		color: #333333;
		padding: 16rpx;
		word-wrap: break-word;
	}

	.img-123 {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}


	.help-top {

		// border-radius: 20rpx;
		margin-top: 20rpx;

		background-color: #FFF;

		.cardHelper {
			position: relative;

			.caseTtile {
				z-index: 99;
				width: 320rpx;
				position: absolute;
				bottom: 130rpx;
				left: 10rpx;
				color: #FFF;
				font-size: 30rpx;
			}

			.bofan {
				z-index: 999;

				position: absolute;
				bottom: 80rpx;
				right: 0rpx;
				color: #fff;
				

				.bofanImg {

					width: 36rpx;
					height: 36rpx;
				}

				.bofanNum {
					width:100rpx;
				}

			}


		}
	}

	.bg {
		width: 750rpx;
		height: 350rpx;

		// 	background: url('~static/122.png');

		// background-repeat: no-repeat;
		// background-size: contain;
	}
</style>